.comment {
  border-top: 1px solid #efeaea;
  padding-bottom: 30px;
  &__ {
    &num {
      font-weight: 700;
      padding: 20px 0;
    }

    &list {
      display: flex;
      flex-direction: column;
    }

    &item {
      display: flex;

      margin-bottom: 10px;

      &-username {
        color: #a9a3a3;
        font-size: 17px;
      }

      &-avatar {
        margin-right: 10px;
        width: 30px;
        height: 30px;
        img {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }

      &-info {
        display: flex;
        flex-direction: column;
        gap: 10px;
      }

      &-content {
        font-size: 15px;
        color: #282626;
        font-size: medium;
      }

      &-time {
        font-size: 13px;
        color: #a9a3a3;
      }
    }

    &reply {
      margin-top: 10px;
      display: flex;
      flex-direction: column;

      &- {
        &item {
          display: flex;
          margin-bottom: 10px;
        }
      }

      &-info {
        display: flex;
        flex-direction: column;
        gap: 5px;
      }

      &-avatar {
        margin-right: 10px;
        width: 30px;
        height: 30px;
        img {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }

      &-username {
        color: #a9a3a3;
        font-size: 17px;
      }

      &-content {
        font-size: 15px;
        color: #282626;
      }

      &-time {
        font-size: 13px;
        color: #a9a3a3;
      }
    }
  }
}
